import React from "react";
import styled from "styled-components";
import { Card } from "antd";

const Stylde = styled.div`
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 45px;
    margin-bottom: 15px;
    h2 {
      font-size: 22px;
      font-weight: 400;
    }
    .space-x-20 {
    }
  }
`;

const CommonPage = (props) => {
  const { showHeader = true, title = "" } = props;

  const children = React.Children.toArray(props.children);
  let headerSlot = [],
    actionSlot = [],
    defaultSlot = [];

  children.forEach((item) => {
    const slot = item?.props?.slot;
    if (slot === "header") {
      headerSlot.push(item);
    } else if (slot === "action") {
      actionSlot.push(item);
    } else {
      defaultSlot.push(item);
    }
  });
  return (
    <Stylde>
      {showHeader ? (
        <header>
          {/* 名为header的插槽有内容就使用，否则使用action插槽 */}
          {headerSlot.length > 0 ? (
            headerSlot
          ) : (
            <>
              <h2>{title}</h2>
              <div className="space-x-20">{actionSlot}</div>
            </>
          )}
        </header>
      ) : null}
      <Card style={{ minHeight: showHeader ? "575px" : "635px" }}>
        {defaultSlot}
      </Card>
    </Stylde>
  );
};

export default CommonPage;
